<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title" :hideBg="hideBg" statusHeight :txtColor="txtColor" :backColor="backColor"></status-bar>
        <image :src="$imgUrls(info.atlas)" mode="widthFix" class="rows"></image>

        <view class="tabs">
            <u-tabs :list="snatch" :lineWidth="54" :lineColor="color" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="click"></u-tabs>
        </view>
        <u-sticky :customNavHeight="totalHeight">
            <view class="classIfyBox">
                <view class="childIfy">
                    <u-tabs :list="tabData" :current="current" lineColor="transparent" :activeStyle="tabactiveStyle" :inactiveStyle="tabinactiveStyle" @click="tabclick"></u-tabs>
                </view>
                <view class="Publish" @click="issue">
                    <view class="iconfont icon-tianjia size20"></view>
                    <text class="size28">发布</text>
                </view>
            </view>
        </u-sticky>

        <listOne v-if="snatch_type == 1" :pageData="pageData"></listOne>
        <listTwo v-if="snatch_type == 2" :pageData="pageData"></listTwo>
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import listOne from '@/grab/components/listOne.vue';
    import listTwo from '@/grab/components/listTwo.vue';
    export default {
        components: {
            listOne,
            listTwo
        },
        data() {
            return {
                title: ' ',
                showModal: false,
                hideBg: 1,
                txtColor: true,
                backColor: true,
                id: '',
                tabData: [],
                snatch: [],
                snatch_type: 1, // 1热销推荐 2紧急需求
                info: '',
                page: 1,
                limit: 10,
                getMore: false,
                pageData: [],
                current: 0
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
            this.goodsList();
        },
        methods: {
            goodsList() {
                this.$http
                    .get({
                        url: '/SnatchApi/goodsList',
                        data: {
                            classify_id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        const tabData = result.list || [];
                        const newObj = {
                            name: '全部',
                            id: this.id
                        };
                        tabData.unshift(newObj);
                        this.tabData = tabData;
                        this.snatch = result.snatch || [];
                        this.info = result;
                        this.init();
                    });
            },
            // 热销推荐
            getShopSnatchGoods() {
                this.$http
                    .get({
                        url: '/SnatchApi/getShopSnatchGoods',
                        data: {
                            page: this.page,
                            limit: this.limit,
                            classify_id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        result.length < this.limit ? (this.getMore = false) : (this.getMore = true);
                    });
            },
            getMemberSnatchGoods() {
                this.$http
                    .get({
                        url: '/SnatchApi/getMemberSnatchGoods',
                        data: {
                            page: this.page,
                            limit: this.limit,
                            classify_id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        result.length < this.limit ? (this.getMore = false) : (this.getMore = true);
                    });
            },
            init() {
                this.page = 1;
                this.getMore = false;
                this.pageData = [];
                this.snatch_type == 1 ? this.getShopSnatchGoods() : this.getMemberSnatchGoods();
                this.$pop.pageScrollTo();
            },
            click(e) {
                this.snatch_type = e.snatch_type;
                this.current = 0;
                this.id = this.tabData[0].id;
                this.init();
            },
            tabclick(e) {
                this.id = e.id;
                this.current = e.index;
                this.init();
            },
            toPush() {
                if (this.snatch_type == 1) this.toUrl(`snatchOne?snatch_type=${this.snatch_type}`);
                if (this.snatch_type == 2) this.toUrl(`snatchTwo?snatch_type=${this.snatch_type}`);
            },

            issue() {
                if (!this.vid) return (this.showModal = true);
                if (this.snatch_type == 1) this.toUrl(`issueOne?snatch_type=${this.snatch_type}`);
                if (this.snatch_type == 2) this.toUrl(`issueTwo?snatch_type=${this.snatch_type}`);
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'totalHeight']),
            activeStyle() {
                return {
                    color: '#000',
                    fontSize: '34rpx',
                    fontWeight: '500'
                };
            },
            inactiveStyle() {
                return {
                    color: '#666',
                    fontSize: '32rpx'
                };
            },
            tabactiveStyle() {
                return {
                    color: '#fff',
                    fontSize: '30rpx',
                    backgroundColor: this.color,
                    padding: '6rpx 24rpx',
                    borderRadius: '10rpx'
                };
            },
            tabinactiveStyle() {
                return {
                    color: '#333',
                    fontSize: '30rpx',
                    backgroundColor: '#fff',
                    padding: '6rpx 24rpx',
                    borderRadius: '10rpx'
                    // color: '#999',
                    // fontSize: '30rpx'
                };
            },
            publish_num() {
                if (!this.snatch.length) return;
                return this.snatch.find((n) => n.snatch_type == this.snatch_type).publish_num;
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.snatch_type == 0 ? this.getShopSnatchGoods() : this.getMemberSnatchGoods();
        },
        onPageScroll(e) {
            let scrollTop = e.scrollTop;
            if (scrollTop > 180) {
                this.hideBg = 0;
                this.txtColor = false;
                this.backColor = false;
                this.title = this.info.classify_name;
            } else {
                this.hideBg = 1;
                this.txtColor = true;
                this.backColor = true;
                this.title = ' ';
            }
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 20rpx;
    }
</style>
<style lang="scss" scoped>
    .tabs {
        width: 100%;
        background-color: $page;
    }
    .classIfyBox {
        width: 100%;
        background-color: $page;
        padding: 0 12rpx;
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        .childIfy {
            flex: 1;
            /deep/.u-tabs__wrapper__nav__item {
                padding: 0 5px;
            }
        }
        .Publish {
            padding: 10rpx 24rpx;
            background-color: var(--color);
            display: flex;
            align-items: center;
            color: #fff;
            border-radius: 10rpx;
            margin-right: 10rpx;
        }
    }
</style>
